Skip to content

feat: support thousand separator in user input #2132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
0xjorgen merged 10 commits into from
Jan 7, 2026
Merged

feat: support thousand separator in user input #2132

0xjorgen merged 10 commits into from
Jan 7, 2026

Conversation

@0xjorgen
Copy link
Contributor

@0xjorgen 0xjorgen commented Dec 18, 2025 •
edited
Loading

Integrates react-number-format to display user input with thousand separators (e.g., 1,234,567.89) in the bridge input fields.

Changes

  • New AmountInput component: Shared component that encapsulates NumericFormat with focus state management, preventing value conflicts between user typing and quote updates
  • Simplified OriginTokenInput and DestinationTokenDisplay: Removed duplicated formatting logic, now delegate to AmountInput
  • Enhanced ToggleUnitButton: Moved converted amount calculation into the component for better encapsulation
  • Removed useTokenInput hook: Logic moved directly into AmountInput component
  • Added Storybook: InputForm.stories.tsx with interaction test for thousand separator formatting

Technical Details

  • Uses onValueChange with sourceInfo.source === "event" to only handle user interactions
  • Focus state (isFocused) prevents quote updates from overwriting user input while typing
  • shouldUpdate flag determines whether to show calculated quote results or user input
Screenshot 2025-12-18 at 12 59 35 UTC@2x

@vercel
Copy link

vercel bot commented Dec 18, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
app-frontend-v3 Ready Ready Preview, Comment Jan 5, 2026 10:58am
sepolia-frontend-v3 Ready Ready Preview, Comment Jan 5, 2026 10:58am

@linear
Copy link

linear bot commented Dec 18, 2025

FE-211 Format input field to match output field format

@vercel
Copy link

vercel bot commented Dec 18, 2025

Deployment failed with the following error:

Hobby accounts are limited to daily cron jobs. This cron expression (* * * * *) would run more than once per day. Upgrade to the Pro plan to unlock all Cron Jobs features on Vercel.

Learn More: https://vercel.link/3Fpeeb1

@0xjorgen 0xjorgen changed the title jorgen/fe 211 format input field to match output field format 2 feat: support thousand separator in user input Dec 18, 2025
Merge branch 'master' into jorgen/fe-211-format-input-field-to-match-…
fd4a6ab 
…output-field-format-2

# Conflicts:
#	src/hooks/useTokenInput.ts
jorgen added 2 commits January 5, 2026 10:20
gsteenkamp89
gsteenkamp89 approved these changes Jan 6, 2026
View reviewed changes
Copy link
Contributor

@gsteenkamp89 gsteenkamp89 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is pretty slick.
Tested. Works well 👏

@0xjorgen 0xjorgen merged commit 819535c into master Jan 7, 2026
9 of 12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@gsteenkamp89 gsteenkamp89 gsteenkamp89 approved these changes

@mrice32 mrice32 Awaiting requested review from mrice32 mrice32 is a code owner

@nicholaspai nicholaspai Awaiting requested review from nicholaspai nicholaspai is a code owner

@dohaki dohaki Awaiting requested review from dohaki dohaki is a code owner

@amateima amateima Awaiting requested review from amateima amateima is a code owner

@ashwinrava ashwinrava Awaiting requested review from ashwinrava ashwinrava is a code owner

@melisaguevara melisaguevara Awaiting requested review from melisaguevara melisaguevara is a code owner

@NikolasHaimerl NikolasHaimerl Awaiting requested review from NikolasHaimerl NikolasHaimerl is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@0xjorgen @gsteenkamp89